<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
            user-select: none;
        }
        .text{
            width:600px;
            height:140px;
            margin:20px auto 0;
        }
        .text textarea{
            outline: none;
            padding:5px;
            resize: none;
        }
        .text #send{
            width:80px;
            height:30px;
            line-height: 30px;
            border:none;
            outline: none;
            text-align: center;
            background: firebrick;
            color:#fff;
        }
        .chat{
            width:600px;
            overflow: hidden;
            margin:auto;
            padding-bottom:20px;
            background-color: #fff;
        }
        .clearfix:after{
            content:"";
            display:block;
            clear:both;
        }
        .chat ul{
            margin-bottom:10px;
        }
        .chat ul li{
            width:600px;
            overflow: hidden;
           
        }
        .chat ul li .img{
            float:left;
            width:100px;
            height:100px;
            
        }
        .chat ul li .img img{
            display: block;
            width:60px;
            height:60px;
            border-radius: 50%;
            margin:20px auto 20px;
        }
        .chat ul li .txt{
            float:left;
            width:500px;
        }
        .chat ul li .txt .name{
            width:100%;
            height:30px;
            line-height: 30px;
            font-size:14px;
            color:firebrick;
            
        }
        .chat ul li .txt .content{
            width:100%;
            padding-bottom:10px;
            font-size:14px;
            color:rgb(44, 43, 43);
           
        }
        .chat ul li .txt .time{
            font-size:12px;
            color:rgb(44, 43, 43);
            border-bottom:1px solid #f1f1ff;
        }
        .chat ul li .txt .comment{
            font-size:14px;
            color:rgb(44, 43, 43);
            cursor: pointer;
        }
        .chat ul li .txt .comment .good{
            color:skyblue;
        }
        .chat ul li .txt .discuss{
            width:100%;
            height:30px;
            margin-top:5px;
        }
        .chat ul li .txt .discuss .discuss_txt{
            width:300px;
            height:25px;
            border:1px solid #999;
            border-radius: 5px 0 0 5px;
            outline: none;
            box-sizing: border-box;
            float: left;
            border-right: none;
            text-indent: 10px;
        }
        .chat ul li .txt .discuss .discuss_btn{
            width:60px;
            height:25px;
            line-height: 25px;
            text-align: center;
            outline: none;
            border:none;
            background: darkcyan;
            color:#fff;
            border-radius: 0 5px 5px 0;
            float: left;
            border:1px solid #999;
            box-sizing: border-box;
            border-left: none;
            cursor: pointer;
        }
        .chat ul li .txt .discuss_text{
            width:90%;
            overflow: hidden;
            padding:10px;
            border:1px solid skyblue;
        }
        .fade-leave-active{
            transition:transform 1s;
        }
        .fade-leave-to,.fade-enter{
            transform: translateY(-100%);
        }
        .fade-enter-active{
            transition:transform 1s;
        }
        /* li{
            transition:all 1s;
        } */
    </style>
</head>
<body>
    <div id="app">
        <textcomment  :message="msg" v-on:update="updatemsg" v-on:add="unshiftmsg" ></textcomment> 
        <chat :list="list" @del="del" @clickgood="good" @sticktxt="stickTop" ></chat>   
    </div>
    <script src="js/vue.js"></script>
    <script>
        //提交评论组件
        Vue.component("textcomment",{
            template:"<div class='text'><textarea cols='80' rows='5' :value='message' @change='change($event)' id='inp'></textarea><br><input type='button' value='发表' @click='sub' id='send'></div>",
            props:["message","list"],
            methods:{
                change:function($event){
                    this.$emit("update",$event.target.value);
                    
                },
                sub:function(index){
                    //如果当前的message为空，则不执行
                    if(this.message==''){
                        alert("请输入你的内容");
                        return;
                    }
                    this.$emit("add",this.message);
                    var inp = document.getElementById("inp");
                    inp.value="";
                 
                }
            }
        })
        //发表说说的组件  :css="ischeck" 告诉VUE不需要检测css动画属性
        Vue.component("chat",{
            template:`
                <div class="chat">
                    <transition-group name="fade" tag="ul" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled">
                        <li  v-for="(item,index) in list" :key="item.id">
                            <div class="img">
                                <img src="img/head.jpg" alt="">
                            </div>
                            <div class="txt">
                                <div class="name">{{item.userName}}</div>
                                <div class="content">
                                    {{item.msg}}
                                </div>
                                <div class="time">
                                    {{item.time}}
                                </div>
                                <div class="comment">
                                    <span @click="tab(index)" v-bind:class={good:item.clickgood}>{{item.clicknum}}{{good}}</span>
                                    <span>{{comment}}</span>
                                    <span @click="canclelist(index)">{{cancle}}</span>
                                    <span @click="sticktxt(index)">{{stick}}</span>
                                </div>
                            </div>
                        </li>
                    </transition-group>  
                </div>
            `,
            props:["list","clickgood"],
            data:function(){
                return{
                    good:"点赞",
                    comment:"评论",
                    cancle:"删除",
                    stick:"置顶"
                }
            },
            methods:{
                canclelist:function(index){
                    this.$emit("del",index)
                },
                tab:function(index){
                    this.$emit("clickgood",index);
                },
                discuss_change:function($event){
                    this.discuss_msg = $event.target.value;
                },
                sticktxt:function(index){
                    this.$emit("sticktxt",index);
                },
                beforeEnter:function(el){
                   // console.log(el);
                    //el.style.backgroundColor="transparent";
                },
                enter: function (el, done) {
                    // console.log(el);
                    // debugger
                   // el.offsetWidth;
                    //el.style.transition="all 1s";
                   // el.style.backgroundColor="#f1f1f1";
                    //done()
                },
                afterEnter: function (el) {
                    console.log(el);
                },
                enterCancelled: function (el) {
                    console.log(el);
                }
            }
        })
        var app = new Vue({
            el:"#app",
            data:{
                msg:"",
                //用一个是数组装着对象
                list:[]

            },
            beforeMount:function() {
                var localMsg = localStorage.getItem("saveInfo");
               if(localMsg !== null){
                   localMsg = JSON.parse(localMsg);
                   for(let i=0;i<localMsg.length;i++){
                       this.list.push(localMsg[i]);
                   }
               }
                
            },
            methods:{
                updatemsg:function(newValue){
                    this.msg = newValue;  
                },
                unshiftmsg:function(newValue){
                     //用一个数组装着创建好的对象
                     var obj=this.initMsg(newValue);
                     obj.time=this.format(obj.time);
                     this.list.unshift(obj);
                     var savemsg = JSON.stringify(this.list);
                     localStorage.setItem("saveInfo",savemsg );
                     this.msg="";
                    
                },
                 // 1.点击发送之前，创建一个对象
                //创建对象方法
                initMsg:function(newValue){
                    //debugger
                    return {
                        msg:newValue,
                        userName:"夕阳下美了剪影",
                        time:new Date().getTime(),
                        clickgood:false,
                        clicknum:0,
                        id:new Date().getTime()
                      
                    }
                },
                //格式化时间
                format:function(time){
                    var time=new Date(time);
                    return time.getFullYear()+"/"+(time.getMonth()+1)+"/"+time.getDate()+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
                },
                //删除方法
                del:function(index){
                    this.list.splice(index,1);
                    localStorage.setItem("saveInfo", JSON.stringify(this.list));
                },
                good:function(index){
                    this.list[index].clickgood = true;
                    this.list[index].clicknum++;
                    localStorage.setItem("saveInfo", JSON.stringify(this.list));
                },
                stickTop:function(index){
                    var list = this.list.splice(index,1);
                    this.list.unshift(list[0]);
                    localStorage.setItem("saveInfo", JSON.stringify(this.list));
                }
            }
        })
    </script>
</body>
</html>